import React, { useMemo } from 'react';

import { defaultsDeep } from 'lodash-es';

import type { WithCustomLegendComponentProps } from '@/components/chart/withCustomLegend';
import { withCustomLegend } from '@/components/chart/withCustomLegend';

import Chart, { ChartOption, ChartProps } from '../index';

export type BarProps = ChartProps & WithCustomLegendComponentProps & { id?: string };

const Bar: React.FC<BarProps> = ({ option: propsOption, data, ...rest }) => {
  const option: ChartOption = useMemo(() => {
    const res: ChartOption = defaultsDeep({}, propsOption, {
      legend: {
        show: false
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [],
          type: 'bar'
        }
      ]
    } as ChartOption);

    return res;
  }, [propsOption, data]);

  return <Chart option={option} {...rest} />;
};

export default withCustomLegend()(Bar);
